/**
 * 系统管理 菜单管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->
    <el-row>
      <!-- title -->
      <div class="modt-box">菜单管理</div>
      <el-col :span="4"> </el-col>
      <el-col :span="6">
        <div class="mod-btnbox">
          <el-button size="small"
                     type="primary">全部展开</el-button>
          <el-button size="small"
                     type="primary">全部压缩</el-button>
        </div>
        <!-- 使用自己的动态树形菜单 -->
        <Dynamicnav :showbox="false"
                    @callfather="callfather"
                    :reload="flag"></Dynamicnav>
      </el-col>
      <el-col :span="18">
        <div class="mod-btnbox">
          <el-button size="small"
                     type="primary"
                     icon="el-icon-plus"
                     @click="addModule">添加</el-button>
        </div>
        <el-form ref="form"
                 :model="form"
                 label-width="80px"
                 :rules="rules">
          <!-- <el-form-item label="父级菜单"
                        prop="parentId">
            <el-select size="small"
                       v-model="form.parentId"
                       placeholder="请选择"
                       class="selectw">
              <el-option v-for="parm in fmenu"
                         :key="parm.id"
                         :label="parm.name"
                         :value="parm.id"></el-option>
            </el-select>
          </el-form-item> -->
          <el-form-item label="菜单id"
                        prop="menuid">
            <el-input :disabled="true"
                      size="small"
                      v-model="form.menuid"></el-input>
          </el-form-item>
          <el-form-item label="菜单名称"
                        prop="menuname">
            <el-input size="small"
                      v-model="form.menuname"></el-input>
          </el-form-item>
          <el-form-item label="图标"
                        prop="icon">
            <el-input size="small"
                      v-model="form.icon"></el-input>
            请自己去官网复制图标名称:
            <a href="https://element.eleme.cn/#/zh-CN/component/icon"
               target="blank">点我</a>
          </el-form-item>
          <el-form-item label="URL"
                        prop="url">
            <el-input size="small"
                      v-model="form.url"></el-input>
          </el-form-item>
          <!-- <el-form-item label="顺序"
                          prop="menuid">
              <el-input size="small"
                        v-model="form.menuid"></el-input>
            </el-form-item> -->
          <el-form-item>
            <el-button size="small"
                       type="primary"
                       @click="saveModule('form')">保存</el-button>
            <el-button size="small"
                       type="primary"
                       v-show="showdelete"
                       @click="deleteModule">删除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  ModuleList,
  ModuleGet,
  ModuleNodes,
  ModuleSave,
  ModuleDelete,
} from '../../api/userMG'
import Dynamicnav from '@/components/dynamicnav'
export default {
  components: { Dynamicnav },
  data() {
    return {
      showdelete: false,
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      form: {
        addUser: '',
        editUser: '',
        addTime: '',
        editTime: '',
        moduleId: '',
        parentId: '',
        moduleLevel: '',
        systemNo: '',
        isLeaf: '',
        fullIndex: '',
        moduleIcon: '',
        moduleOrder: '',
        moduleName: '',
        moduleNotes: '',
        moduleUrl: '',
        menuid: '',
        menuname: '',
        icon: '',
        url: '',
      },
      // rules表单验证
      rules: {
        parentId: [
          { required: true, message: '请选择父级菜单', trigger: 'blur' },
        ],
        menuname: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
        ],
        icon: [{ required: true, message: '请输入菜单图标', trigger: 'blur' }],
        url: [{ required: true, message: '请输入URL', trigger: 'blur' }],
        moduleOrder: [
          { required: true, message: '请输入菜单顺序', trigger: 'blur' },
        ],
      },
      fmenu: [],
      flag: true,
    }
  },
  /**
   * 创建完毕
   */

  created() {
    // this.getdata()
    // this.getmenu()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //左侧菜单点击后获取子组件的值
    callfather(data) {
      //   this.form = data
      //   console.log(this.form)
      this.form.menuid = data.menuid
      this.form.menuname = data.menuname
      this.form.icon = data.icon
      this.form.url = data.url
    },

    // 添加
    addModule() {
      this.showdelete = false
      this.form.addUser = ''
      this.form.editUser = ''
      this.form.addTime = ''
      this.form.editTime = ''
      this.form.moduleId = ''
      this.form.parentId = ''
      this.form.moduleLevel = ''
      this.form.systemNo = ''
      this.form.isLeaf = ''
      this.form.fullIndex = ''
      this.form.moduleIcon = ''
      this.form.moduleOrder = ''
      this.form.moduleName = ''
      this.form.moduleNotes = ''
      this.form.moduleUrl = ''
    },

    // 复选变单选
    handleClick(data, checked, node) {
      if (checked) {
        this.$refs.tree.setCheckedNodes([])
        this.$refs.tree.setCheckedNodes([data])
        this.showdelete = true
      } else {
      }
    },
    // 点击节点
    nodeclick(arr, node, self) {
      ModuleGet(arr.id)
        .then((res) => {
          console.log(JSON.stringify(res))
          this.form = res.data.data
          this.$refs.tree.setCheckedNodes([])
          this.$refs.tree.setCheckedNodes([arr])
        })
        .catch((err) => {
          this.loading = false
          this.$message.error('用户管理获取失败,请稍后再试!')
        })
    },
    // 保存菜单
    saveModule(editData) {
      this.$refs[editData].validate((valid) => {
        if (valid) {
          this.$axios
            .post('/rbacMenu/updateOne', this.form)
            .then((res) => {
              console.log(res)

              if (res.data.code === 200) {
                this.flag = !this.flag
                this.$message.success('菜单管理列表修改成功')
              } else {
                this.$message.error('菜单管理列表保存失败,请稍后再试!')
              }
            })
            .catch()
        } else {
          return false
        }
      })
    },
    // 删除菜单
    deleteModule() {
      ModuleDelete(this.form.moduleId)
        .then((res) => {
          this.getdata()
          this.getmenu()
          this.$message.error('菜单管理列表删除成功!')
        })
        .catch((err) => {
          this.$message.error('菜单管理列表删除失败!请稍后再试!')
        })
    },
  },
}
</script>

<style>
.user-search {
  margin-top: 20px !important;
}
.user-search td {
  margin-top: 20px !important;
}
.userRole {
  width: 100%;
}
.el-table__expanded-cell {
  padding: 0px !important;
  margin: 0px !important;
}
.modt-box {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f0f2f5;
  text-align: center;
  color: #334157;
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 24px;
}
.mod-btnbox {
  margin-bottom: 20px;
}
.treeclass {
  border: 1px solid #f3f3f3;
  padding-top: 20px;
  padding-bottom: 20px;
}
.selectw {
  width: 100%;
}
</style>
 
 